<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>佳特台账</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form layout="inline" :model="form" style="margin-top:0px;">
        <a-form-item label="业务类型">
          <a-select v-model="form.belongCompany" class="selectWidth">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="JIA_HUA">佳华业务</a-select-option>
            <a-select-option value="JIA_TE">自有业务</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="订单类型">
          <a-select v-model="form.orderType" style="width:150px">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="DOMESTIC_TRADE_EXPORTS">内贸出口订单</a-select-option>
            <a-select-option value="DOMESTIC_TRADE_IMPORTS">内贸进口订单</a-select-option>
            <a-select-option value="FOREIGN_TRADE_EXPORTS">外贸出口订单</a-select-option>
            <a-select-option value="FOREIGN_TRADE_IMPORTS">外贸进口订单</a-select-option>
            <a-select-option value="UNITED_TRANSPORT_EXPORTS">联运出口订单</a-select-option>
            <a-select-option value="UNITED_TRANSPORT_IMPORTS">联运进口订单</a-select-option>
            <a-select-option value="PURE_LAND_TRANSPORTS">纯陆运订单</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input-group compact>
            <a-select v-model="form.inputType" style="width:110px" @change="textChange">
              <a-select-option value="truckOrderCode">公司编号</a-select-option>
              <a-select-option value="seagoingShipOrderCode">运单号</a-select-option>
              <a-select-option value="containerNo">箱号</a-select-option>
              <a-select-option value="containerSealNo">封号</a-select-option>
            </a-select>
            <a-input
              style="width:230px"
              v-if="form.inputType === 'truckOrderCode'"
              v-model="form.truckOrderCode"
            />
            <a-input
              style="width:230px"
              v-if="form.inputType === 'seagoingShipOrderCode'"
              v-model="form.seagoingShipOrderCode"
            />
            <a-input
              style="width:230px"
              v-if="form.inputType === 'containerNo'"
              v-model="form.containerNo"
            />
            <a-input
              style="width:230px"
              v-if="form.inputType === 'containerSealNo'"
              v-model="form.containerSealNo"
            />
          </a-input-group>
        </a-form-item>
        <a-form-item label="订单状态">
          <a-select v-model="form.status" class="selectWidth" mode="multiple">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">司机待接单</a-select-option>
            <a-select-option :value="4">司机待出发</a-select-option>
            <a-select-option :value="5">运输中</a-select-option>
            <a-select-option :value="6">已完成</a-select-option>
            <a-select-option :value="7">已结算</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="运输条款">
          <a-select v-model="form.transportTerms" class="selectWidth">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="DO-DO">DO-DO</a-select-option>
            <a-select-option value="DO-CY">DO-CY</a-select-option>
            <a-select-option value="CY-DO">CY-DO</a-select-option>
            <a-select-option value="CY-CY">CY-CY</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车队类型">
          <a-select v-model="form.operation" class="selectWidth">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">自营</a-select-option>
            <a-select-option :value="0">外派</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="车队名称">
          <a-input v-model="form.teamName" />
        </a-form-item>
        <a-form-item label="客户名称">
          <a-input v-model="form.customerName" />
        </a-form-item>
        <a-form-item label="所属销售">
          <a-input v-model="form.sellName" />
        </a-form-item>
        <a-form-item label="货品名称">
          <a-input v-model="form.goodsName" />
        </a-form-item>
        <a-form-item label="司机">
          <a-input v-model="form.driverName" />
        </a-form-item>
        <a-form-item label="车辆">
          <a-input v-model="form.truckNumber" />
        </a-form-item>
        <a-form-item>
          <a-input-group compact>
            <a-select v-model="form.timeType" style="width:130px" @change="timeTypeChange">
              <a-select-option :value="1">调度接单日期</a-select-option>
              <a-select-option :value="2">完成订单日期</a-select-option>
              <a-select-option :value="3">预计送达日期</a-select-option>
            </a-select>
            <a-range-picker :value="timeValue" @change="timeChange" style="width:300px">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-input-group>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="settings">设置查看字段</a-button>
        </a-form-item>
      </a-form>
      <a-card style="text-align:center; margin-top:24px;">
        <a-row :gutter="[16]">
          <a-col :span="3" class="assent">
            <div class="assent_mes">里程数（km）</div>
            <div class="assent_shu">{{statisticsObj.mileageSum}}</div>
          </a-col>
          <a-col :span="3" class="assent">
            <div class="assent_mes">耗油量（L）</div>
            <div class="assent_shu">{{statisticsObj.oilVolumeSum}}</div>
          </a-col>
          <a-col :span="3" class="assent">
            <div class="assent_mes">箱量（个）</div>
            <div class="assent_shu">{{statisticsObj.numberSum}}</div>
          </a-col>
          <a-col :span="4" class="assent">
            <div class="assent_mes">总应收（元）</div>
            <div class="assent_shu">{{statisticsObj.receivableAmountSum}}</div>
          </a-col>
          <a-col :span="4" class="assent">
            <div class="assent_mes">总应付（元）</div>
            <div class="assent_shu">{{statisticsObj.payableAmountSum}}</div>
          </a-col>
          <a-col :span="4" class="assent">
            <div class="assent_mes">总毛利（元）</div>
            <div class="assent_shu">{{statisticsObj.profitSum}}</div>
          </a-col>
          <a-col :span="3">
            <div class="assent_mes">毛利率</div>
            <div class="assent_shu">{{statisticsObj.profitRateSum}}%</div>
          </a-col>
        </a-row>
      </a-card>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        style="margin-top:25px;"
        :scroll="scroll"
        :pagination="pagination"
        :row-key="(record,index) => index"
      >
        <template slot="company" slot-scope="text, record">
          <a @click="orderDetail(record)">{{text}}</a>
        </template>
      </a-table>
    </div>
    <!-- 设置查看字段 -->
    <a-modal
      :visible="fieldVisible"
      title="设置查看字段"
      centered
      :destroyOnClose="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-checkbox-group @change="onCheckChange" :defaultValue="defaultValues">
        <a-row>
          <a-col v-for="(box, i) in fields" :key="i" :span="12" style="margin-bottom:3px;">
            <a-checkbox :value="box.key">{{box.value}}</a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-modal>
  </div>
</template>
<script>
import { commonExport } from '@/api/request'
import { queryJTReportList } from '@/api/dataBI'
import store from 'store'
const columnsWhole = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '公司编号',
    dataIndex: 'truckOrderCode',
    scopedSlots: {
      customRender: 'company'
    },
    width: 160,
    ellipsis: true
  },
  {
    title: '海船公司',
    width: 180,
    dataIndex: 'seagoingShipCompany',
    customRender: (text, record, index) => {
      return record.seagoingShipCompany || '--'
    }
  },
  {
    title: '箱型',
    dataIndex: 'containerType',
    customRender: (text, record, index) => {
      return record.containerType || '--'
    }
  },
  {
    title: '箱量',
    dataIndex: 'containerNumber',
    customRender: (text, record, index) => {
      return record.containerNumber || '--'
    }
  },
  {
    title: '运单号',
    width: 180,
    dataIndex: 'seagoingShipOrderCode',
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '业务类型',
    dataIndex: 'belongCompany'
  },
  {
    title: '订单类型',
    dataIndex: 'orderType'
  },
  {
    title: '状态',
    dataIndex: 'status'
  },
  {
    title: '运输条款',
    dataIndex: 'transportTerms',
    customRender: (text, record, index) => {
      return record.transportTerms || '--'
    }
  },
  {
    title: '所属销售',
    dataIndex: 'sellName'
  },
  {
    title: '客户名称',
    dataIndex: 'customerName',
    width: 220,
    ellipsis: true
  },
  {
    title: '始发港',
    dataIndex: 'startPort'
  },
  {
    title: '目的港',
    dataIndex: 'endPort'
  },
  {
    title: '门点地址',
    dataIndex: 'address',
    width: 200,
    ellipsis: true,
    customRender: (text, record, index) => {
      return record.address || '--'
    }
  },
  {
    title: '货名',
    dataIndex: 'goodsName'
  },
  {
    title: '货重（吨）',
    dataIndex: 'goodsWeight',
    customRender: (text, record, index) => {
      return record.goodsWeight || '--'
    }
  },
  {
    title: '箱号',
    dataIndex: 'containerNo',
    customRender: (text, record, index) => {
      return record.containerNo || '--'
    }
  },
  {
    title: '封号',
    dataIndex: 'containerSealNo',
    customRender: (text, record, index) => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '车辆',
    dataIndex: 'truckNumber',
    customRender: (text, record, index) => {
      return record.truckNumber || '--'
    }
  },
  {
    title: '司机',
    dataIndex: 'driverName',
    customRender: (text, record, index) => {
      return record.driverName || '--'
    }
  },
  {
    title: '类型',
    dataIndex: 'operation',
    // _needName: true,
    customRender: (text, record, index) => {
      return record.operation || '--'
    }
  },
  {
    title: '车队名称',
    dataIndex: 'teamName',
    customRender: (text, record, index) => {
      return record.teamName || '--'
    }
  },
  {
    title: '总应收（元）',
    dataIndex: 'receivableAmount',
    customRender: (text, record, index) => {
      return record.receivableAmount.toFixed(2)
    }
  },
  {
    title: '总应付（元）',
    dataIndex: 'payableAmount',
    customRender: (text, record, index) => {
      return record.payableAmount.toFixed(2)
    }
  },
  {
    title: '总毛利（元）',
    dataIndex: 'profit',
    customRender: (text, record, index) => {
      return record.profit.toFixed(2)
    }
  },
  {
    title: '毛利率',
    customRender: (text, record, index) => {
      return `${record.profitRate} %`
    },
    dataIndex: 'profitRate'
  },
  {
    title: '里程数（km）',
    dataIndex: 'mileage'
  },
  {
    title: '耗油量（L）',
    dataIndex: 'oilVolume'
  },
  {
    title: '耗油费用（L）',
    dataIndex: 'totalAmount'
  },
  {
    title: '调度接单日期',
    dataIndex: 'createTime'
  },
  {
    title: '完成订单日期',
    dataIndex: 'completeTime',
    customRender: (text, record, index) => {
      return record.completeTime || '--'
    }
  },
  {
    title: '预计送达日期',
    dataIndex: 'arriveTime',
    customRender: (text, record, index) => {
      return record.arriveTime || '--'
    }
  }
]
export default {
  data () {
    return {
      form: {
        belongCompany: '', // 业务类型： JIA_HUA佳华业务、JIA_TE自有业务
        orderType: '', // 订单类型： 内贸出口、内贸进口、外贸出口、外贸进口、联运出口、联运进口
        truckOrderCode: '', // 公司编号
        seagoingShipOrderCode: '', // 运单号
        containerNo: '', // 箱号
        containerSealNo: '', // 封号
        status: [''], // 状态： 1待接单、2待派单、3司机待接单、4司机待出发、5运输中、6已完成、7已结算、8已作废
        transportTerms: '', // 运输条款： DO-DO、DO-CY、CY-DO、CY-CY
        operation: '', // 车队类型： 1.自营 0.外派
        teamName: '', // 车队名称
        sellName: '', // 所属销售
        customerName: '', // 客户名称
        goodsName: '', // 货名
        driverName: '', // 司机
        truckNumber: '', // 车辆
        startTime: '',
        endTime: '',
        inputType: 'truckOrderCode',
        timeType: 1
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columnsWhole,
      columns: [],
      pagination: {},
      statisticsObj: {},
      timeValue: [],
      // 设置查看字段
      fieldVisible: false,
      fields: [],
      defaultValues: [],
      currentValues: null,
      scroll: {x: 3800, y: 600},
      btnControl: {}
    }
  },
  methods: {
    containerListRequest (e) {
      this.loading = true
      queryJTReportList(e)
        .then(res => {
          let statisticsObj = {}
          statisticsObj.receivableAmountSum = res.data.receivableAmountSum // 总应收
          statisticsObj.payableAmountSum = res.data.payableAmountSum // 总应付
          statisticsObj.profitSum = res.data.profitSum // 总毛利
          statisticsObj.profitRateSum = res.data.profitRateSum // 毛利率
          statisticsObj.mileageSum = res.data.mileageSum // 总里程
          statisticsObj.oilVolumeSum = res.data.oilVolumeSum // 总耗油
          statisticsObj.numberSum = res.data.numberSum // 总箱量
          this.statisticsObj = statisticsObj
          this.data = res.data.reportList.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.reportList.pageSize,
            total: res.data.reportList.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.reportList.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.containerListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.containerListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {
          setTimeout(() => {
            this.loading = false
          }, 100)
        })
    },
    textChange () {
      this.form.truckOrderCode = ''
      this.form.seagoingShipOrderCode = ''
      this.form.containerNo = ''
      this.form.containerSealNo = ''
    },
    timeTypeChange () {
      this.timeValue = []
      this.form.startTime = ''
      this.form.endTime = ''
    },
    timeChange (date, dateString) {
      this.form.startTime = dateString[0]
      this.form.endTime = dateString[1]
      this.timeValue = date
    },
    orderDetail (e) {
      window.open(`/landCenter/orderDispatch/${e.orderId}`, '_blank')
    },
    check () {
      this.pageNum = 1
      // this.form.status = this.form.status.join(',')
      this.containerListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      commonExport('/truckReport/exportJTReportList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columnsWhole
      })
    },
    settings () {
      this.fields = this.columnsWhole
        .map(v => {
          if (v.dataIndex) {
            return {
              key: v.dataIndex,
              value: v.title
            }
          }
        })
        .filter(v => v)
      this.fieldVisible = true
    },
    onCheckChange (checkedValues) {
      this.currentValues = checkedValues
    },
    handleOk () {
      this.defaultValues = this.currentValues
      store.set('jiateStandingBook', this.currentValues)
      this.columns = this.columnsWhole.filter((v, i) => {
        return i === 0 || this.currentValues.includes(v.dataIndex)
      })
      this.scroll.x = 150 * this.columns.length
      this.fieldVisible = false
    },
    handleCancel () {
      this.fieldVisible = false
    }
  },
  mounted () {
    // 读取设置的可见字段
    this.currentValues = this.defaultValues =
      this.currentValues ||
      store.get('jiateStandingBook') ||
      this.columnsWhole.map(v => v.dataIndex).filter(v => v)
    this.columns = this.columnsWhole.filter((v, i) => {
      return i === 0 || this.currentValues.includes(v.dataIndex)
    })
    this.scroll.x = 150 * this.columns.length
    this.containerListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
